<!--
 * @Author: 数字滚动
 * @Date: 2019-12-12 09:13:58
 * @LastEditTime : 2019-12-18 14:32:23
 * @LastEditors  : Please set LastEditors
 * @Description: 数字3D滚动组件
 * @FilePath: \blessingvue\src\components\NumberScroll.vue
 -->
<template>
  <div class="wrap">
    <ul>
      <li
        v-for="(item,index) in num_list"
        :key="index"
        :style="{transform:`rotateX(${item*(-30)}deg)`}"
      >
        <span
          v-for="i in num"
          :key="i"
          :style="{transform:`rotateX(${(i==='.'?10:(i===''?11:i))*30}deg) translateZ(80px)`}"
        >{{i}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NumberScroll",
  props: {
    price: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      // num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "·", ""]
      num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ".", ""]
    };
  },
  methods: {},
  computed: {
    num_list() {
      let arr = String(this.price).split("");
      let arr_ = [];
      arr.map((item, index) => {
        if (item === ".") {
          item = 10;
        }
        if (item === "") {
          item = 11;
        }
        arr_[index] = item;
      });
      return arr_;
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  display: block;
  position: relative;
  ul {
    perspective-origin: 50% 50%;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100px;
    li {
      transform-style: preserve-3d;
      position: relative;
      width: 60px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: 50% 50%;
      transition: all 1s linear;
      span {
        position: absolute;
        width: 80px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 50px;
        color: #ff3030;
        font-weight: bolder;
        background:#fff;
        text-shadow: 0 2px 5px rgb(255, 48, 48,.4);
      }
    }
  }
}
@keyframes roll {
  to {
    transform: rotateX(360deg);
  }
}
</style>